<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索-->
        <div style="margin-top:15px"></div>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="userSearch" class="user-search">
        <el-form-item label="搜索：">
            <el-input clearable size="small" v-model="userSearch.name" placeholder="输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="danger" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
        </el-form>


    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" style="width: 100%;">
            
            <el-table-column
              width="200"
              prop="username"
              label="用户名">
            </el-table-column>

            <el-table-column
                width="200"
              prop="telephone"
              label="电话">
              <template slot-scope="scope">
                      <div style="font-size:16px">{{scope.row.telephone}}</div>
              </template>
            </el-table-column>

            <el-table-column
                width="200"
              prop="names"
              label="昵称">
            </el-table-column>
            
            <el-table-column
            width="200"
              prop="sex"
              label="性别">
              <template slot-scope="scope">
                      <el-tag type="danger" size="medium">{{scope.row.sex}}</el-tag>
              </template>
            </el-table-column>

          

          

          <el-table-column
          width="200"
              prop="birthday"
              label="生日">
          </el-table-column>


         <el-table-column
            width="200px"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button  @click="editClick(scope.row)" type="primary" size="small"><i class="el-icon-edit"/>编辑用户</el-button>
            </template>
        </el-table-column>
           
           
    </el-table>

    <!--弹窗-->
    <el-dialog title="编辑用户" :visible.sync="FormVisible" width="30%" @click="FormVisible == true">
  
      
      <el-form label-width="80px" :model="Form"  ref="editForm">
        <el-form-item label="用户名" >
          <el-input size="small" clearable v-model="Form.username" auto-complete="off" placeholder="请输入商品名"></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input size="small" clearable v-model="Form.telephone" auto-complete="off" placeholder="products/1/xxx"></el-input>
        </el-form-item>
        <el-form-item label="昵称" >
          <el-input 
        size="small" v-model="Form.names" auto-complete="off" ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button   type="primary"  class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
    


    
    </div>
</template>
<script>
export default {
     data() {
         return {
             Form:{
                username:'',
                telephone:'',
                names:''
             },
             listData:'',
             userSearch:{
                 name:'',
             },
             FormVisible:false,
             loading:false,
             
             Visible:false,
             title:1
         }
     },
     created(){
        this.getList();
     },
     methods:{
         submitForm(){ //用户保存
            this.$api.post("/user/updateUser",this.Form,res=>{
                    this.FormVisible = false;
                    this.getList();
                    this.$message.success(res.data.data);
            })
         },
         editClick(data){
             this.FormVisible =true
             this.Form.uid = data.uid;
             this.Form.names = data.names
            this.Form.username = data.username
            this.Form.telephone = data.telephone
         },
         seeClick(id){
            this.Visible =true;
            this.loading2 = true;
            this.$api.get("/address/admin/findAddressByUserid",{"uid":id},Response=>{
                  this.AddressData = Response.data.data;
            })
            setTimeout(()=>{
                this.loading2 = false;
            },500)
         },
         getList(){           //获取数据
         this.loading = true;
            this.$api.get("/user/findAllUser",{"username":this.userSearch.name},Response=>{
                    if(Response.data.code == 200){
                        this.listData = Response.data.data
                    }
            })
            setTimeout(()=>{
                this.loading = false
            },1000)
         },
         search(){
             this.getList();
         },
         
     }
}
</script>
<style scoped>

</style>